<!--
 * @LastEditors: tangdy tdy853839625@qq.com
 * @FilePath: /HumanGenerateVideo/src/layouts/modules/global-header/components/user-avatar.vue
-->
<script setup lang="ts">
import { computed, onMounted, ref } from 'vue';
import dayjs from 'dayjs';
import { useAuthStore } from '@/store/modules/auth';

defineOptions({
  name: 'UserAvatar'
});

const authStore = useAuthStore();
onMounted(() => {
  authStore.initUserInfo(); // 获取用户信息
});
const formateTime = computed(() => {
  if (authStore.userInfo.createTime) {
    return dayjs(authStore.userInfo.createTime).format('YYYY-MM-DD HH:mm:ss');
  }
  return '暂无信息';
});
const visible = ref<boolean>(false);
</script>

<template>
  <!-- <NButton v-if="!authStore.isLogin" quaternary @click="loginOrRegister">暂未登录</NButton> -->
  <ButtonIcon @click="visible = true">
    <SvgIcon icon="ph:user-circle" class="text-icon-large" />
    <span class="text-16px font-medium">{{ authStore.userInfo.phone || '我的信息' }}</span>
  </ButtonIcon>

  <NModal v-model:show="visible" :auto-focus="false" class="w-120 bg-header" preset="card" display-directive="if">
    <template #header>
      <p class="text-5 text-base_text font-500">我的信息</p>
    </template>
    <ul class="text-3.5">
      <!--
 <li class="mb-3 h-12 flex-y-center border border-content_hover rounded-1 px-4">
        <span class="w-25 text-light_text">账号</span>
        {{ authStore.userInfo.userid || '暂无信息' }}
      </li>
-->
      <li class="mb-3 h-12 flex-y-center border border-content_hover rounded-1 px-4">
        <span class="w-25 text-light_text">手机号</span>
        {{ authStore.userInfo.phone || '暂无信息' }}
      </li>
      <li class="mb-3 h-12 flex-y-center border border-content_hover rounded-1 px-4">
        <span class="w-25 text-light_text">创建时间</span>
        {{ formateTime || '暂无信息' }}
      </li>
    </ul>
  </NModal>
</template>
